﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="ContentType" content="text/html;charset=utf-8" />
    <title> Home </title>
    <link rel="stylesheet" type="text/css" href="./skins/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="./skins/main.css" />
    <script type="text/javascript" src="./js/jquery.js"></script>
	<script type="text/javascript" src="./js/adapter/jquery/ext-jquery-adapter.js"></script>
	<script type="text/javascript" src="./js/ext-all.js"></script>
    <script type="text/javascript">
    <!--
    $(function(){

    });
layout = new Ext.BorderLayout(document.body, {
	                    north: {
	                        split:false,
	                        initialSize: 32,
	                        titlebar: false
	                    },
	                    west: {
	                        split:true,
	                        initialSize: 200,
	                        minSize: 175,
	                        maxSize: 400,
	                        titlebar: true,
	                        collapsible: true,
                            animate: true
	                    },
	                    east: {
	                        split:true,
	                        initialSize: 202,
	                        minSize: 175,
	                        maxSize: 400,
	                        titlebar: true,
	                        collapsible: true,
                            animate: true
	                    },
	                    south: {
	                        split:true,
	                        initialSize: 100,
	                        minSize: 100,
	                        maxSize: 200,
	                        titlebar: true,
	                        collapsible: true,
                            animate: true
	                    },
	                    center: {
	                        titlebar: true,
	                        autoScroll:true,
                            closeOnTab: true
                        }
	                });

                    layout.beginUpdate();
	                layout.add('north', new Ext.ContentPanel('north', 'North'));
	                layout.add('south', new Ext.ContentPanel('south', {title: 'South', closable: true}));
	                layout.add('west', new Ext.ContentPanel('west', {title: 'West'}));
	                layout.add('east', new Ext.ContentPanel(Ext.id(), {autoCreate:true, title: 'Dynamic Tab', closable: true}));
	                layout.add('east', new Ext.ContentPanel('autoTabs', {title: 'Auto Tabs', closable: true}));
	                layout.add('center', new Ext.ContentPanel('center1', {title: 'Close Me', closable: true}));
	                layout.add('center', new Ext.ContentPanel('center2', {title: 'Center Panel', closable: false}));
	                layout.getRegion('center').showPanel('center1');
	                layout.getRegion('west').hide();
	                layout.endUpdate();
    //-->
    </script>
</head>
<body>

</body>
</html>
